<template>
  <div class="loading" :style="loadingStyle">
    <svg class="circular" viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20" fill="none" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'icon',
  props: {
    size: [String, Number],
    color: String
  },
  computed: {
    loadingStyle () {
      const size = this.size ? this.size.toString().includes('px') ? this.size : this.size + 'px' : null
      return {
        width: size,
        height: size,
        color: this.color
      }
    }
  }
}
</script>

<style scoped lang="less">
@import "~common/style/variable.less";

.loading {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  animation: loading-rotate .8s linear infinite;
  animation-duration: 2s;
  color: @color-theme;
  .circular {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 1;
    circle {
      animation: loading 1.5s ease-in-out infinite;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
    }
  }
}

@keyframes loading-rotate {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

@keyframes loading {
  0% {
    stroke-dasharray:1,200;
    stroke-dashoffset:0
  }
  50% {
    stroke-dasharray:90,150;
    stroke-dashoffset:-40
  }
  100% {
    stroke-dasharray:90,150;
    stroke-dashoffset:-120
  }
}
</style>
